<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="../templates/ui.xhtml">

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">SelectOneRadio</h1>
		<div class="entry">
			<p>SelectOneRadio extends standard SelectOneRadio with skinning
				capabilities and custom layout feature.</p>

			<h:form id="form">

				<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">

					<h:outputText value="Options: " />
					<p:selectOneRadio id="options" value="#{formBean.number}">
						<f:selectItem itemLabel="Option 1" itemValue="1" />
						<f:selectItem itemLabel="Option 2" itemValue="2" />
						<f:selectItem itemLabel="Option 3" itemValue="3" />
					</p:selectOneRadio>

				</h:panelGrid>

				<h3>Custom Layout</h3>
				<p:outputPanel id="customPanel">
					<p:selectOneRadio id="customRadio" value="#{formBean.option}"
						layout="custom">
						<f:selectItem itemLabel="Option 1" itemValue="1" />
						<f:selectItem itemLabel="Option 2" itemValue="2" />
						<f:selectItem itemLabel="Option 3" itemValue="3" />
					</p:selectOneRadio>

					<h:panelGrid columns="3">
						<p:radioButton id="opt1" for="customRadio" itemIndex="0" />
						<h:outputLabel for="opt1" value="Option 1" />
						<p:spinner />

						<p:radioButton id="opt2" for="customRadio" itemIndex="1" />
						<h:outputLabel for="opt2" value="Option 2" />
						<p:inputText />

						<p:radioButton id="opt3" for="customRadio" itemIndex="2" />
						<h:outputLabel for="opt3" value="Option 3" />
						<p:calendar />
					</h:panelGrid>
				</p:outputPanel>

				<br />
				<br />

				<p:commandButton id="submitButton" value="Submit" update="display" />

				<br />
				<br />

				<h:panelGrid columns="2" id="display">
					<h:outputText value="Value1:" />
					<h:outputText id="value1" value="#{formBean.number}" />
					<h:outputText value="Value2:" />
					<h:outputText id="value2" value="#{formBean.option}" />
				</h:panelGrid>

			</h:form>

			<h3>Source</h3>
			<p:tabView>
				<p:tab title="selectOneRadio.xhtml">
					<pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"&gt;

        &lt;h:outputText value="Options: " /&gt;
        &lt;p:selectOneRadio id="options" value="\#{formBean.number}"&gt;
            &lt;f:selectItem itemLabel="Option 1" itemValue="1" /&gt;
            &lt;f:selectItem itemLabel="Option 2" itemValue="2" /&gt;
            &lt;f:selectItem itemLabel="Option 3" itemValue="3" /&gt;
        &lt;/p:selectOneRadio&gt;

    &lt;/h:panelGrid&gt;

    &lt;h3&gt;Custom Layout&lt;/h3&gt;
    &lt;p:outputPanel id="customPanel"&gt;
    &lt;p:selectOneRadio id="customRadio" value="\#{formBean.option}" layout="custom"&gt;
        &lt;f:selectItem itemLabel="Option 1" itemValue="1" /&gt;
        &lt;f:selectItem itemLabel="Option 2" itemValue="2" /&gt;
        &lt;f:selectItem itemLabel="Option 3" itemValue="3" /&gt;
    &lt;/p:selectOneRadio&gt;

    &lt;h:panelGrid columns="3"&gt;
        &lt;p:radioButton id="opt1" for="customRadio" itemIndex="0"/&gt;
        &lt;h:outputLabel for="opt1" value="Option 1" /&gt;
        &lt;p:spinner /&gt;

        &lt;p:radioButton id="opt2" for="customRadio" itemIndex="1"/&gt;
        &lt;h:outputLabel for="opt2" value="Option 2" /&gt;
        &lt;p:inputText /&gt;

        &lt;p:radioButton id="opt3" for="customRadio" itemIndex="2"/&gt;
        &lt;h:outputLabel for="opt3" value="Option 3" /&gt;
        &lt;p:calendar /&gt;
    &lt;/h:panelGrid&gt;
    &lt;/p:outputPanel&gt;

    &lt;p:commandButton id="submitButton" value="Submit" update="display"/&gt;

    &lt;h:panelGrid columns="2" id="display"&gt;
        &lt;h:outputText value="Value1:" /&gt;
        &lt;h:outputText id="value1" value="\#{formBean.number}" /&gt;
        &lt;h:outputText value="Value2:" /&gt;
        &lt;h:outputText id="value2" value="\#{formBean.option}" /&gt;
    &lt;/h:panelGrid&gt;

&lt;/h:form&gt;
					</pre>
				</p:tab>
			</p:tabView>

		</div>

	</ui:define>
</ui:composition>